{% extends 'base.html' %}
{% load i18n static simpletags tz %}
{% block title %}
呼吸道疾病智能双端语音识别系统
{% endblock %}

{% block load %}
{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
{% endblock %}

{% block content %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史诊断记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#6B7280'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
</head>

<body class="m-20 min-h-[1024px] bg-gray-50">
    <div class="max-w-[1440px] mx-auto px-8 py-6">
        <div class="flex items-center justify-between mt-20 bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center gap-3">
                <i class="fas fa-stethoscope text-primary text-2xl"></i>
                <h1 class="text-2xl font-semibold text-gray-900">历史诊断记录</h1>
            </div>
            <a href="{% url 'disease_recognition:upload_audio' %}"
                class="flex items-center gap-2 bg-primary text-white px-6 py-3 !rounded-button hover:bg-primary/90 transition-colors whitespace-nowrap">
                <i class="fas fa-plus"></i>
                <span>上传新的音频</span>
            </a>
        </div>

        <div class="grid gap-6 mr-10 ml-10 m-10 ">
            {% for record in diagnosis_histories %}
            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-all duration-300">
                <a href="{% url 'disease_recognition:history_detail' record.id %}" class="block">
                    <div class="flex justify-between items-start mb-4">
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <span
                                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary/10">
                                    <i class="fas fa-heartbeat text-primary"></i>
                                </span>
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900">{{ record.diagnosis_result }}</h3>
                                    <p class="text-sm text-gray-500">诊断时间：{{ record.diagnosis_date }}</p>
                                </div>
                            </div>
                            {% if record.notes %}
                            <div class="ml-13 pl-4 border-l-2 border-gray-200">
                                <p class="text-sm text-gray-600">
                                    <i class="fas fa-comment-medical text-gray-400 mr-2"></i>
                                    {{ record.notes }}
                                </p>
                            </div>
                            {% endif %}
                        </div>
                        <span class="text-primary">
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </div>
                </a>

                <form method="post" action="{% url 'disease_recognition:history_detail_add_note' record.id %}"
                    class="flex gap-3">
                    {% csrf_token %}
                    <div class="relative flex-1">
                        <i class="fas fa-pen text-gray-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                        <input type="text" name="note" placeholder="添加或修改诊断备注..."
                            class="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 !rounded-button focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>
                    <button type="submit"
                        class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-2 !rounded-button transition-colors whitespace-nowrap">
                        保存备注
                    </button>
                </form>
            </div>
            {% empty %}
            <div class="text-center py-16 bg-white rounded-lg">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                    <i class="fas fa-file-medical text-2xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">暂无诊断记录</h3>
                <p class="text-gray-500 mb-6">点击右上角按钮上传新的音频开始诊断</p>
                <a href="{% url 'disease_recognition:upload_audio' %}"
                    class="inline-flex items-center gap-2 text-primary hover:text-primary/90 transition-colors">
                    <span>立即上传</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</body>

</html>

{% endblock %}